<template>
	<div class="list">
		<a-button type="primary" class="base-mb10" @click="openModal">+ {{ $t('self.businessPostage.tips9') }}
		</a-button>

		<a-form ref="searchFormRef" class="search-form base-mb15" :model="searchFormState" @finish="onSearchFinish">
			<a-row :gutter="[10, 24]">
				<a-col :span="6">
					<a-form-item name="orgId" :label="$t('self.businessPostage.tips7')">
						<a-select allow-clear v-model:value="searchFormState.orgId" :options="searchOrgOptions"
							:fieldNames="{label: 'orgName',value: 'id'}" :placeholder="$t('self.pleaseChoose')" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="tariffPolicyName" :label="$t('self.businessPostage.tips2')">
						<a-input allow-clear v-model:value="searchFormState.tariffPolicyName" />
					</a-form-item>
				</a-col>
				<a-col class="base-flex base-rows">
					<a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
					<a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
				</a-col>
			</a-row>
		</a-form>

		<s-table ref="stableRef" :api-obj="tableConfig.apiObj" 
		api-method="POST" :columns="sourceColumn" row-key="id"
			:light-index="tableConfig.lightIndex" :is-row-selection="false" @selectionChange="tableSelectionChange"
			:is-show-tool="false">

			<template #bodyCell="{ column, record, index }">
				<template v-if="column.key === 'priceType'">
					<template v-if="record[column.key] === 1">
						{{ $t('self.businessStation.supportingFacilitiesType.tips1') }}
					</template>
					<template v-else-if="record[column.key] === 2">
						{{ $t('self.businessStation.supportingFacilitiesType.tips2') }}
					</template>
					<template v-else>
						{{ record[column.key] }}
					</template>
				</template>

				<template v-if="column.key === 'commonElecPrice'">
					<template v-if="record[column.key] === null || record[column.key] === ''">
						{{ $t('self.none') }}
					</template>
					<template v-else>
						{{ record[column.key] }}
					</template>
				</template>
				
				<!--是否启用，1 启用，0 不启用-->
				<template v-if="column.key === 'isUse'">
					<template v-if="record[column.key]">
						<sc-status-indicator type="success"></sc-status-indicator>
						{{ $t('self.yesTxt') }}
					</template>
					<template v-else>
						<sc-status-indicator type="warning"></sc-status-indicator>
						{{ $t('self.noTxt') }}
					</template>
				</template>

				<template v-if="column.key === 'action'">
					<span>
						<a href="javascript:void(0)" @click="openModal(record, index,'edit')">{{ $t('self.edit') }}</a>

						<a-divider type="vertical" />
						<a-popconfirm :title="$t('self.confirmDelete')" :ok-text="$t('self.yesTxt')"
							:cancel-text="$t('self.noTxt')" @confirm="handleDelete(record, index)">
							<a href="javascript:void(0)">{{ $t('self.delete') }}</a>
						</a-popconfirm>

						<!-- &nbsp;<a href="javascript:void(0)" @click="openModal(record, index,'price')">{{ $t('self.rate') }}</a> -->
					</span>
				</template>

			</template>
		</s-table>

		<editModal ref="modalRef" @ok="stableRef.refresh()" @close=""></editModal>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		onMounted,
		ref,
		watch
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import ScStatusIndicator from '@/components/scMini/scStatusIndicator.vue'
	import {
		mainStore
	} from '@/stores/mainStore'
	import editModal from './edit_modal.vue'
	import {
		message
	} from 'ant-design-vue'

	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $API = proxy.$API
	const $T = proxy.$t
	const route = useRoute()
	const router = useRouter()
	const useMainStore = mainStore()

	const selectedKey = ref([])
	const stableRef = ref(null)
	const tableConfig = ref({
		apiObj: $API.backend.businessPostage.list,
		loading: true,
		lightIndex: [] // 要高亮的行号
	})
	// 表格列
	const sourceColumn = ref([])

	onMounted(async () => {
		// 获取表格列
		resetDefaultOptionsByLang()
		// 获取运营商下拉数据
		searchOrgOptions.value = await proxy.getOrgSelectList(true)
	})

	// 监听 lang 状态
	watch(
		() => useMainStore.lang, // 切换语言包时
		(curr, old) => {
			// console.log('语言包', curr)
			// 获取表格列
			resetDefaultOptionsByLang()
		}
	);


	const resetDefaultOptionsByLang = () => {
		sourceColumn.value = [
			// {
			//   title: $T('self.businessPostage.tips1'),
			//   dataIndex: 'id',
			//   key: 'id',
			//   // width: 110
			// },
			{
				title: $T('self.businessPostage.tips2'),
				dataIndex: 'policyName',
				key: 'policyName'
			},
			{
				title: $T('self.businessPostage.tips10'),
				dataIndex: 'priceType',
				key: 'priceType'
			},
			{
				title: $T('self.businessPostage.tips3'),
				dataIndex: 'commonElecPrice',
				key: 'commonElecPrice'
			},
			// {
			//   title: $T('self.businessPostage.tips4'),
			//   dataIndex: 'chargeServiceFee',
			//   key: 'chargeServiceFee'
			// },
			{
				title: $T('self.businessPostage.tips8'),
				dataIndex: 'isUse',
				key: 'isUse'
			},
			{
				title: $T('self.createTimeTxt'),
				dataIndex: 'createTime',
				key: 'createTime'
			},
			{
				title: $T('self.lastUpdateTimeTxt'),
				dataIndex: 'updateTime',
				key: 'updateTime'
			},
			{
				title: $T('self.actionButton'),
				key: 'action',
				ellipsis: true,
				fixed: 'right'
			}
		]
	}

	const tableSelectionChange = (rows, record) => {
		selectedKey.value = rows
		// console.log('表格选择项', rows, record)
	}

	// =========start search表单
	const searchFormRef = ref(null)
	const searchFormState = ref({
		orgId: null, // 运营商户
		tariffPolicyName: '', // 资费策略名称
	})
	const searchOrgOptions = ref([])

	const onSearchFinish = (values) => {
		const params = $TOOL.array.cleanParams(values)
		stableRef.value.upData(params, 1)
	}
	// 重置搜索表单
	const resetSearchForm = () => {
		searchFormRef.value.resetFields()
	}
	// =========end search表单

	const modalRef = ref(null)
	const openModal = (record, index,option) => {
		if (index !== undefined) {
			// 编辑
			tableConfig.value.lightIndex = [index] // 仅高亮当前行
			nextTick(() => {
				modalRef.value.edit(record)
			})
		} else {
			// 新增
			modalRef.value.add()
		}

	}

	const handleDelete = (record, index) => {
		$API.backend.businessPostage.delete.post({
			id: record.id
		}).then(() => {
			message.success($T('self.message.success'))
			stableRef.value.refresh()
		}).catch(err => {
			message.error(err.msg);
		})
	}
</script>

<style lang="scss" scoped>
	.list {
		height: 100%;
		background: #ffffff;
		padding: 15px;

		.search-form {
			padding: 16px;
			background: rgb(247, 248, 250);

			:deep(.ant-form-item) {
				margin-bottom: 0;
			}
		}
	}
</style>
